<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>房间管理</title>
		<link href="<c:url value="/resources/css/style.css" />" rel="stylesheet" type="text/css">
		<link href="<c:url value="/resources/css/default/easyui.css" />" rel="stylesheet" type="text/css">
		<link href="<c:url value="/resources/css/icon.css" />" rel="stylesheet" type="text/css">
		<script type="text/javascript" src="<c:url value="/resources/js/jquery-1.7.2.js" />"></script>
		<script type="text/javascript" src="<c:url value="/resources/js/jquery.easyui.min.js" />"></script>
		<script type="text/javascript" src="<c:url value="/resources/js/easyui-lang-zh_CN.js" />"></script>
		<script type="text/javascript">
			function onReset(){
				$("#roomNo").val('');
				$("#roomTypeName").val('');
				$("#roomAreaName").val('');
			}
			
			function onQuery(){
				$('#roomTable').datagrid({
					url: 'queryRoom.do',
					pageNumber:1,				
					queryParams:{roomNo:$("#roomNo").val(),						
						roomTypeName:$.trim($('#roomTypeName').val()),
						roomAreaName:$.trim($('#roomAreaName').val())}
				});
			}
		</script>
	</head>
	
	<body>
		<table id="roomTable" class="easyui-datagrid" title="房间列表" style="width:700px;height:250px;"
 			data-options="rownumbers:true,singleSelect:true,toolbar:'#tb', border:false,singleSelect:true,
 					fit:true,fitColumns:true,pagination:true,url:'queryRoom.do'">
			<thead>
				<tr>
					<th data-options="field:'room_no',width:80,align:'center'">房间编号</th>
					<th data-options="field:'roomTypeName',width:120,align:'center'">房间类型</th>
					<th data-options="field:'roomAreaName',width:120,align:'center'">房间区域</th>
					<th data-options="field:'capacity',width:120,align:'center'">房间容量</th>
					<th data-options="field:'room_status',width:120,align:'center', formatter:function(value){
							if(value == '${roomStatusFree}')
							    return '空闲';
							else
								return '使用';
						}">房间状态</th>
				</tr>
			</thead>
		</table>
		
		<div id="tb" style="padding:5px;height:auto">
			<div style="margin-bottom:5px">
				<a href="initAddRoom" class="easyui-linkbutton" iconCls="icon-add" plain="true">新增</a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true"></a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true"></a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true"></a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true"></a>
			</div>
			
			<form id="queryRoomForm" name="queryRoomForm" action="queryRoom" method="post">
			<div>
				房间编号: <input class="easyui-validatebox" name="roomNo" id="roomNo" style="width:80px">
				&nbsp;&nbsp;&nbsp;&nbsp;
				房间类型: <input class="easyui-validatebox" name="roomTypeName" id="roomTypeName" style="width:80px">
				&nbsp;&nbsp;&nbsp;&nbsp;                          
				房间区域: <input class="easyui-validatebox" name="roomAreaName" id="roomAreaName" style="width:80px">
				&nbsp;&nbsp;
				<a href="#" class="easyui-linkbutton" id="searchBtn" style="text-align: center" onclick="onQuery()">查询</a>
				<a href="#" class="easyui-linkbutton" id="resetBtn" style="text-align: center" onclick="onReset()">清空</a>
			</div>
			</form>
		</div>
	</body>
</html>